<template>
  <div>
    <van-field
      readonly
      clickable
      :value="formItem.valueText"
      :label="formItem.label"
      :placeholder="formItem.placeholder"
      @click="showTaxType = true"
      input-align="right"
      :label-width="160"
    />
    <van-field class="van-field-display" readonly :name="formItem.name" :value="formItem.value" />

    <van-popup v-if="!typeno" v-model="showTaxType" position="bottom">
      <van-picker
        show-toolbar
        :columns="formItem.columns"
        @confirm="onConfirm"
        @change="onChange"
        @cancel="showTaxType = false"
      />
    </van-popup>
  </div>
</template>

<script>
/**
 * 选择框，底部弹出
 */
export default {
  props: {
    formItem: {
      type: Object,
      default: {
        name: "",
        value: "",
        label: "",
        placeholder: "",
        columns: []
      }
    }
  },
  data() {
    return {
      typeno:false,
      showTaxType: false,
      name: "selectPicker"
    };
  },
  created() {
    let type = Number(this.$route.query.type);
    if (type !== 0) {
      this.typeno = true
    }
  },
  methods: {
    onConfirm(value) {
      this.formItem.valueText = value.text;
      this.formItem.value = value.type;
      this.showTaxType = false;
    },
    onChange(picker, values) {
      this.$emit('change',values)
    }
  }
};
</script>
<style lang="less" scoped>
.van-field-display {
  display: none;
}
</style>
